import { useEffect, useState } from 'react';
import styles from '@/pages/main/index.less';
import Block from '@/pages/main/components/Block';
import { Carousel } from 'antd';

const scaleBase = window.scaleBase;

const LeftTopCarousel = props => {
  const { data, type } = props;
  const [first] = data;
  const [height, setHeight] = useState('120rem');


  const image = type === 'in' ? [
    require('../../../assets/images/dev/in_1.png'),
    require('../../../assets/images/dev/in_2.png'),
    require('../../../assets/images/dev/in_3.png'),
    require('../../../assets/images/dev/in_4.png'),
    require('../../../assets/images/dev/in_5.png'),
  ] : [
    require('../../../assets/images/dev/out_1.png'),
    require('../../../assets/images/dev/out_2.png'),
    require('../../../assets/images/dev/out_3.png'),
    require('../../../assets/images/dev/out_4.png'),
    require('../../../assets/images/dev/out_5.png'),
    require('../../../assets/images/dev/out_6.png'),
  ]

  useEffect(()=> {
    setHeight(document.getElementById('left-top-carousel').offsetHeight - 60 * scaleBase)
  },[])

  return data.length === 1 ? <div className={styles.leftTopCarouselImageBox}>
    <img src={image[0]} alt="" style={{height}}/>
    <h4>{first.car}</h4>
  </div> : <Carousel
    autoplay
    pauseOnHover={false}
    slidesToShow={2}
    dots={false}
  >
    {
      data.map(({ id, car }, idx) => (
        <div key={id} className={styles.leftTopCarouselImageBox}>
          <img src={image[idx]} alt="" style={{height}}/>
          <h4>{car}</h4>
        </div>
      ))
    }
  </Carousel>
}

const LeftTop = props => {
  const { data } = props;

  const renderBody = () => {
    const inList = data?.filter(t => t.type === 'in') || [];
    const outList = data?.filter(t => t.type === 'out') || [];

    return <div className={styles.leftTopCarouselWrapper}>
      <div className={styles.leftTopCarousel} id={'left-top-carousel'}>
        <div>
          <h3>车内预警抓拍</h3>
          <LeftTopCarousel data={inList} type={'in'}/>
        </div>
      </div>
      <div className={styles.leftTopCarousel}>
        <div>
          <h3>车外预警抓拍</h3>
          <LeftTopCarousel data={outList} type={'out'}/>
        </div>
      </div>
    </div>
  }


  return <Block
    containerClassName={styles.leftTop}
    title={'驾驶主动安全预警'}
    body={renderBody()}
  />
}

export default LeftTop;
